<!DOCTYPE html>
<html>
  <head>
    <title>svg demo</title>
    <style type="text/css">
      #line {
        transition: all 2s;
        stroke-dasharray: 300, 320;
        stroke-dashoffset: 300;
      }

      svg:hover #line {
        stroke-dashoffset: 0;
      }

      #circle {
        transition: all 2s;
        stroke-dasharray: 314, 314;
        stroke-dashoffset: 100;
      }
      svg:hover #circle {
        stroke-dashoffset: 0;
      }
    </style>
  </head>
  <body>
    <h3>线段区域</h3>
    <svg width="100%" height="40">
      <line
        id="line"
        x1="30"
        y1="30"
        x2="300"
        y2="30"
        stroke-width="20"
        stroke="red"
      />
    </svg>

    <h3>圆区域</h3>

    <svg width="200" height="200" viewBox="0 0 200 200">
      <circle
        id="circle"
        cx="100"
        cy="80"
        r="50"
        fill="gray"
        stroke-width="5"
        stroke="green"
      />
    </svg>
  </body>
</html>
